import { Input, List, Row, Col, Button } from "antd";
import { FileFilled, FolderFilled } from '@ant-design/icons';
import styles from './index.less';
import { useState } from 'react';
import { useRequestHandle } from '@/utils/utils';
import { getDirectory, backup } from '../service';
import { useUpdateEffect } from '@umijs/hooks';
import { message } from "antd";
import { Space } from "antd";

export default (props) => {
    const { record, onBackup, loading } = props;
    const [directoryList, setDirectoryList] = useState([]);
    const [lastDirectory, setLastDirectory] = useState([]);
    const [backupDirectoryList, setBackupDirectoryList] = useState([]);
    const [hoverDirectory, setHoverDirectory] = useState("");
    const [searchValue, setSearchValue] = useState("");
    const [searchValue2, setSearchValue2] = useState("");
    const getDirectoryRequest = useRequestHandle(getDirectory, (data) => {
        setDirectoryList(data);
    });
    const backupRequest = useRequestHandle(backup, (data) => {
        message.success("备份成功");
        onBackup(data);
    });

    useUpdateEffect(() => {
        if (hoverDirectory) {
            getDirectoryRequest.run({ id: record.agentServerId, path: hoverDirectory })
        }
    }, [hoverDirectory]);

    useUpdateEffect(() => {
        setHoverDirectory(record.rootPath);
    }, [record])
    let tmpDirectoryList = directoryList;
    if (searchValue) {
        tmpDirectoryList = tmpDirectoryList.filter(item => item.path.indexOf(searchValue) !== -1)
    }

    let tmpDirectoryList2 = backupDirectoryList;
    if (searchValue2) {
        tmpDirectoryList2 = tmpDirectoryList2.filter(item => item.path.indexOf(searchValue2) !== -1)
    }
    return <div>
        <Row justify={"end"}>
            <Col>
                <Button
                    loading={backupRequest.loading || loading}
                    onClick={() => {
                        backupRequest.run({ id: record.id, serverName: record.serverName, paths: backupDirectoryList.map(i => i.path), rootPath: record.rootPath })
                    }}
                    type="primary">执行备份
                </Button>


            </Col>
        </Row>
        <Row gutter={[12]}>
            <Col span={12}>
                <div style={{ marginBottom: "12px" }}>服务根路径：{record.rootPath}</div>
                <Space style={{ marginBottom: "12px" }}>
                    <Button
                        onClick={() => {
                            const newBackupDirectory = [...backupDirectoryList];
                            directoryList.forEach(item => {
                                if (item.canRead && item.canWrite && !newBackupDirectory.find(i => i.path === item.path)) {
                                    newBackupDirectory.push(item);
                                }
                            });
                            setBackupDirectoryList(newBackupDirectory);
                        }}
                        size="small" type="primary">当前路径全选备份</Button>
                </Space>
                <Input value={searchValue} onChange={
                    (e) => {
                        setSearchValue(e.target.value)
                    }
                } style={{ marginBottom: "12px" }} placeholder='请输入关键字' />

                <List
                    style={{ marginBottom: "12px" }}
                    size="small"
                    bordered
                    key={"list1"}
                    dataSource={lastDirectory && lastDirectory.length >= 1 ? [{ path: "..", type: 2 }, ...tmpDirectoryList] : tmpDirectoryList}
                    renderItem={(item) =>
                        <List.Item>
                            <div className={styles.directory}>
                                <span onClick={() => {
                                    if (item.type === 1) {
                                        return;
                                    }
                                    if (backupDirectoryList.find(i => i.path === item.path)) {
                                        message.warning("已整体添加备份");
                                        return;
                                    }
                                    if (item.path === "..") {
                                        const lastPath = lastDirectory[lastDirectory.length - 1];
                                        const newLastDirectory = lastDirectory.slice(0, lastDirectory.length - 1);
                                        setLastDirectory(newLastDirectory);
                                        setHoverDirectory(lastPath);
                                    }
                                    else {
                                        if (item.canRead && item.canWrite) {
                                            const newLastDirectory = lastDirectory;
                                            newLastDirectory.push(hoverDirectory);
                                            setLastDirectory(newLastDirectory);
                                            setHoverDirectory(item.path);
                                        }
                                        else {
                                            message.error("无读取或者写入权限")
                                        }

                                    }

                                }}>
                                    {item.type === 1
                                        ? <FileFilled style={{ color: "#ff21b9", marginRight: "4px", fontSize: "11px" }} />
                                        : <FolderFilled style={{ color: "#54aeff", marginRight: "4px" }} />}

                                    {item.path === ".." ? "" : <span>
                                        {item.path.split("\\")[item.path.split("\\").length - 1]}
                                        <span style={item.canRead ? { color: "green", marginLeft: "10px", fontSize: "12px" } : { color: "red", marginLeft: "10px", fontSize: "12px" }}>读</span>
                                        <span style={item.canWrite ? { color: "green", marginLeft: "10px", fontSize: "12px" } : { color: "red", marginLeft: "10px", fontSize: "12px" }}>写</span>
                                    </span>}

                                    <span style={{ fontSize: "12px", color: "#0083e3" }}>
                                        {item.path === ".." ? <>返回上一级<span style={{ marginLeft: "10px" }}>{lastDirectory[lastDirectory.length - 1]}</span></> : ""}</span>

                                </span>

                                <Button
                                    onClick={() => {

                                        if (backupDirectoryList.find(i => i.path === item.path)) {
                                            message.warning("已整体添加备份");
                                            return;
                                        }

                                        const newBackupDirectory = [...backupDirectoryList];
                                        newBackupDirectory.push(item);
                                        setBackupDirectoryList(newBackupDirectory);

                                    }}
                                    size='small' style={{ float: "right" }}>添加备份</Button>
                            </div></List.Item>}
                />
            </Col>
            <Col span={12}>
                <div style={{ marginBottom: "12px" }}>当前选择备份目录/文件：</div>
                <Space style={{ marginBottom: "12px" }}>
                    <Button
                        onClick={() => {

                            setBackupDirectoryList([]);
                        }}
                        size="small" type="primary">全部清空</Button>
                </Space>
                <Input value={searchValue2} onChange={
                    (e) => {
                        setSearchValue2(e.target.value)
                    }
                } style={{ marginBottom: "12px" }} placeholder='请输入关键字' />
                <List
                    style={{ marginBottom: "12px" }}
                    size="small"
                    bordered
                    key={"list2"}
                    dataSource={tmpDirectoryList2}
                    renderItem={(item) =>
                        <List.Item>
                            <div className={styles.directory}>
                                <span onClick={() => {
                                }}>
                                    {item.type === 1
                                        ? <FileFilled style={{ color: "#ff21b9", marginRight: "4px", fontSize: "11px" }} />
                                        : <FolderFilled style={{ color: "#54aeff", marginRight: "4px" }} />}

                                    {item.path === ".." ? "" : <span>
                                        {item.path}
                                        <span style={item.canRead ? { color: "green", marginLeft: "10px", fontSize: "12px" } : { color: "red", marginLeft: "10px", fontSize: "12px" }}>读</span>
                                        <span style={item.canWrite ? { color: "green", marginLeft: "10px", fontSize: "12px" } : { color: "red", marginLeft: "10px", fontSize: "12px" }}>写</span>
                                    </span>}

                                </span>

                                <Button
                                    onClick={() => {
                                        const newBackupDirectory = [...backupDirectoryList];
                                        newBackupDirectory.splice(backupDirectoryList.indexOf(item), 1);
                                        setBackupDirectoryList(newBackupDirectory);

                                    }}
                                    size='small' style={{ float: "right" }}>取消备份</Button>
                            </div></List.Item>}
                />
            </Col>
        </Row>
    </div>
}